﻿@{
    Layout = null;
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Test Application</title>
  
  <link rel="stylesheet" type="text/css" href="/css/main.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script  src="/Scripts/colResizable-1.3.min.js"></script>

  
  <script>
      $(function () {
          function addZero(n) {
              return n.length > 1 ? n : (+n > 0) ? "0" + n : n;
          }

          function moveFreeDaysMover(ranges) {
              var firstSlider = $('#slider.first-slider .CRC');
              var firstSliderWidth = firstSlider.width();
              var daysFrom = Math.floor(356 * (ranges[0]) / firstSliderWidth);
              var daysTo = Math.floor(356 * ((firstSliderWidth - ranges[3]) / firstSliderWidth));
              var avarage = daysTo - daysFrom;
              var freeDays = Math.floor(avarage / 6);
              var movers = firstSlider.find('.CRG');
              var fdmp = (firstSliderWidth - ((freeDays / 365) * firstSliderWidth) - ranges[3]) + 'px';
              movers.get(1).setAttribute('style', 'left:' + fdmp);
              var trs = $('table#range tbody tr td');
              var range = firstSliderWidth - (trs[0].offsetWidth + trs[3].offsetWidth) - 41;
              console.log(x);
              var fdwidth1 = 5 * range / 6;
              var fdwidth2 = range / 6;
              trs.get(1).setAttribute('style', 'width:' + fdwidth1);
              trs.get(2).setAttribute('style', 'width:' + fdwidth2);
              console.log(trs);
              return freeDays;
          }

          function setDates(ranges) {
              var firstSliderWidth, daysFrom, monthFrom, monthFromShow1,
              daysFromShow1, yearFromShow1, daysTo, monthTo,
              monthToShow1, daysToShow1, yearToShow1;
              for (var i = 0; i < ranges.length; i++) {
                  if (ranges[i] < 1) ranges[i] = 0;
              }
              firstSliderWidth = $('#slider.first-slider .CRC').width();
              daysFrom = Math.floor(356 * (ranges[0]) / firstSliderWidth);
              monthFrom = Math.floor(daysFrom / 30);
              monthFromShow1 = monthFrom + 1;
              daysFromShow1 = 1 + daysFrom - monthFrom * 30;
              yearFromShow1 = '2013';
              $("#from").val(addZero(monthFromShow1.toString()) + '/' + addZero(daysFromShow1.toString()) + '/' + yearFromShow1);
              daysTo = Math.floor(356 * ((firstSliderWidth - ranges[3]) / firstSliderWidth));
              monthTo = Math.floor(daysTo / 30);
              monthToShow1 = monthTo + 1;
              daysToShow1 = 1 + daysTo - monthTo * 30;
              yearToShow1 = daysTo < 365 ? '2013' : '2014';
              $("#to").val(addZero(monthToShow1.toString()) + '/' + addZero(daysToShow1.toString()) + '/' + yearToShow1);
          }

          $("#from").datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 3,
              onClose: function (selectedDate) {
                  $("#to").datepicker("option", "minDate", selectedDate);
              }
          });
          $("#to").datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 3,
              onClose: function (selectedDate) {
                  $("#from").datepicker("option", "maxDate", selectedDate);
              }
          });

          var onMove = function (e) {
              var columns = $(e.currentTarget).find("td");
              var ranges = [], total = 0, i, w;
              for (i = 0; i < columns.length; i++) {
                  w = columns.eq(i).width() - 10 - (i == 0 ? 1 : 0);
                  ranges.push(w);
                  total += w;
              }

              //var allTime = ranges[0] + ranges[1] + ranges[2];
              //var freeDays = allTime / 5;
              //ranges[2] = freeDays;
              //ranges[1] = allTime - freeDays;
              setDates(ranges);
              var freeDays = moveFreeDaysMover(ranges);
              //moveSliders(ranges, total);
          }

          var onSlide = function (e) {
              //570
              var columns = $(e.currentTarget).find("td");
              var ranges = [], total = 0, i, s = "Ranges: ", w;
              for (i = 0; i < columns.length; i++) {
                  w = columns.eq(i).width() - 10 - (i == 0 ? 1 : 0);
                  ranges.push(w);
                  total += w;
              }
              for (i = 0; i < columns.length; i++) {
                  ranges[i] = 365 * ranges[i] / total;
                  carriage = ranges[i] - w
                  s += " " + Math.round(ranges[i]) + "days,";
              }
              s = s.slice(0, -1);
              $("#text").html(s);
          }

          $("#range").colResizable({
              liveDrag: true,
              draggingClass: "rangeDrag",
              gripInnerHtml: "<div class='rangeGrip'></div>",
              onResize: onMove,
              minWidth: 8
          });
      });

      $(document).ready(function () {
          $('#from').val('01/01/2013');
          $('#to').val('01/01/2014');
      });
  </script>
</head>
<body>
 
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />



<div class="center">
        <div id="slider" class="first-slider">
			<table id="range" width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="1%"></td>
					<td width="88%"></td>
					<td width="10%" style=""></td>
					<td width="1%"></td>
				</tr>
			</table>
		</div>
		
		<p id="text">Ranges: 91 days, 91 days, 91 days, 92 days</p>
		
		<br/><br/>
</div>

</body>
</html>